<template>
  <div class="add-plan-root">
    <el-form :model="planCardForm" :rules="planCardFormRules" ref="planCardForm" label-width="60px" class="bjs-form" style="width: 100%;">

      <el-form-item label="标题" prop="title">
        <el-input class="bjs-input" v-model="planCardForm.title" maxlength="9"></el-input>
      </el-form-item>

      <el-form-item label="时间" prop="time">
        <el-input class="bjs-input" v-model="planCardForm.time" placeholder="格式: 12:30 - 15:30, 多个逗号隔开"></el-input>
      </el-form-item>

      <el-form-item label="背景" prop="bg">
        <el-input class="bjs-input" v-model="planCardForm.bg"></el-input>
      </el-form-item>
    </el-form>

    <div class="plan-card-tool">
      <div :class="['plan-card']" v-for="card in cardTemplate" :key="card.bg" @click="selectCard(card.bg)">
        <div class="plan-card-info">
          <div class="plan-card-info-title">{{planCardForm.title ? planCardForm.title:'Template'}}</div>
          <div class="plan-card-info-body"
               v-for="time of planCardForm.time.split(',')"
               :key="time">{{time ? time : '12:30 - 15:30'}}</div>
        </div>
        <svg-icon :iconClass="card.bg"/>
      </div>
    </div>

    <el-button-group style="margin-top: 10px;">
      <el-button size="mini" class="bjs-button" style="width: 70px;" @click="addPlan()">保存</el-button>
      <el-button size="mini" class="bjs-button" style="width: 70px;" @click="resetForm()">重置</el-button>
    </el-button-group>
  </div>
</template>

<script>
  import { postPlan } from '../../../api/plan'
  export default {
    name: "addPlanCard",
    data () {
      return {
        planCardForm: {
          type:'CARD',
          title:'',
          time:'',
          bg: ''
        },
        planCardFormRules: {
          title:   [{required: true, message: '请输入标题', trigger: 'blur' },],
          time:    [{required: true, message: '请选择时间', trigger: 'change' }],
          bg:      [{required: true, message: '请选择背景', trigger: 'blur' }],
        },
        cardTemplate: [
          {bg:'biker'},
          {bg:'breakfast'},
          {bg:'coding'},
          {bg:'design'},
          {bg:'family'},
          {bg:'gaming'},
          {bg:'java'},
          {bg:'learning'},
          {bg:'reading'},
          {bg:'social'},
          {bg:'sport'},
          {bg:'sport-indoor'},
          {bg:'ui_design'},
          {bg:'work'},
        ]
      }
    },
    methods: {
      selectCard (bg) {
        this.planCardForm.bg = bg
      },
      addPlan () {
        this.$refs['planCardForm'].validate((valid) => {
          if (valid) {
            postPlan(this.planCardForm).then(() => {
              this.$bjsNotify.success('新增计划卡片成功')
              this.$emit('findPlanCards');
            })
          }
        })
      },
      resetForm () {
        this.$refs['planCardForm'].resetFields();
      }
    }
  }
</script>

<style scoped lang="scss">
  .add-plan-root {
    @include flex(column,center,center);
    @include boxBase(100%,100%);
  }

  .plan-card-tool {
    @include flex(row,flex-start,center);
    @include boxBase(100%,200px);
    @include themeBgColor(#f8f8f8,#191910);
    margin: 0 20px;
    border-radius: 10px;
    overflow-x: scroll;

    .plan-card {
      @include flex(row,space-between,center);
      @include themeShadow(0 0 12px 0 #e2e2e2, 0 0 12px 0 #0b0b0b);
      max-width: 283px;
      min-width: 283px;
      height: 150px;
      margin: 0 10px;
      border-radius: 10px;
      overflow: hidden;
      transition: box-shadow 0.3s,min-width 0.3s, height 0.3s,margin 0.3s;
      &:hover {
        @include themeShadow(0 0 12px 0 #7c7c7c, 0 0 12px 0 #000000);
      }
      &-info {
        @include flex(column,flex-start,center);
        @include boxBase(110px,100%);
        font-family: Lato,sans-serif;
        &-title,&-body {
          text-align: center;
          @include boxBase(100%,30px);
          @include fontBase(20px,700);
          @include themeColor(#424242,#e7e7e4);
          padding-top: 10px;
        }
        &-body {
          @include fontBase(14px,500);
          @include themeColor(#828282,#b0b0ae);
          height: 20px;
        }
      }
    }

    .plan-card-current {
      @include themeBgColor($theme-color-light,$theme-color-night-7);
      .plan-card-info-title,.plan-card-info-body {
        color: #ffffff;
      }
    }
  }

  .bjs-form {
    /deep/  .el-form-item {
      margin-bottom: 20px;
    }
  }
</style>
